<!--
/**
* Author: zyf
* Date: 2021-09-14 11:13
* Desc: GoodsContainCell
*/
-->
<template>
  <view class="flex goods-contain__cell">
    <view class="goods-contain__cell-label">{{ label }}</view>
    <view class="wb flex-1" v-if="!isArray">{{ value }}</view>
    <view v-else class="flex-1">
      <template v-if="value.length">
        <view class="wb" v-for="(item, index) in value" :key="index">
          <view v-if="hasLine(item)" class="goods-contain__cell-line"></view>
          <view v-else>{{ item }}</view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'GoodsContainCell',
    props: {
      label: String,
      value: [String, Array]
    },
    data() {
      return {}
    },
    computed: {
      isArray() {
        return Array.isArray(this.value)
      }
    },
    methods: {
      // 初始化方法
      hasLine(item) {
        return item === '{{line}}'
      }
    }
  }
</script>
<style lang="scss" scoped>
  .goods-contain__cell {
    color: #888;
    margin-bottom: 20rpx;
    line-height: 40rpx;
    &-label {
      width: 172rpx;
    }
    &-line {
      // height: 1px;
      width: 100%;
      // background: #ddd;
      margin: 3px 0;
      border-bottom: 1px dashed #ddd;
    }
  }
</style>
